<template>
  <div>
    <div class="module-con">
      <nuxt-link :to="{path:'/collect/ts'}" class="module">
        <img src="~/assets/images/ts.png" alt />TS
      </nuxt-link>
      <nuxt-link :to="{path:'/collect/vue'}" class="module">
        V
        <img src="~/assets/images/vue.png" alt />UE
      </nuxt-link>
      <nuxt-link :to="{path:'/collect/node'}" class="module">
        NOD
        <img src="~/assets/images/node.png" alt />E
      </nuxt-link>
    </div>
    <div class="module-con">
      <nuxt-link :to="{path:'/collect/git'}" class="module">
        GI
        <img src="~/assets/images/git.png" alt />T
      </nuxt-link>
      <nuxt-link :to="{path:'/collect/mongodb'}" class="module">
        MON
        <img src="~/assets/images/mongodb.png" alt />GODB
      </nuxt-link>
      <nuxt-link :to="{path:'/collect/redis'}" class="module">
        RE
        <img src="~/assets/images/redis.png" alt />DIS
      </nuxt-link>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
@import "~/assets/style/color.scss";
.module-con {
  text-align: center;
  .module {
    display: inline-block;
    background-color: $hoverBG;
    color: $hoverText;
    width: 10rem;
    height: 6rem;
    line-height: 5rem;
    padding: 1rem;
    box-sizing: border-box;
    border-radius: 6px;
    margin-bottom: 2rem;
    margin-right: 2rem;
    box-shadow: 0 0 0 0px #eaeaea;
    cursor: pointer;
    &:hover {
      box-shadow: 0 0 10px 0px #eaeaea;
      animation: all 0.5s forwards;
      color: #1890ff;
    }
  }
}
.module:last-child {
  margin-right: 0;
}
</style>